<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	request.setAttribute("group", 100);
%>
<%@ include file="../baselayout/import.jsp"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bjtu Machine Learning">
<meta name="author" content="Alex">
<title>标记页面</title>
<link rel="stylesheet" media="screen"
	href="${staticPath}/assets/css/other.css">
<link rel="stylesheet" href="${staticPath}/assets/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${staticPath}/assets/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css"
	href="${staticPath}/assets/css/da-slider.css" />
<link rel="stylesheet" href="${staticPath}/assets/css/style.css">
<link rel="stylesheet" href="${staticPath}/assets/css/main.css">
<style type="text/css">
.navbar-inverse {
	background-color: #222;
	border-color: #080808;
}

.error {
	color: red;
	font-size: 15px;
}
</style>

</head>
<body>


	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">欢迎进入标记页面</a>
			</div>
			<div id="navbar" class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
					<li onclick="logout()"><a href="javascript:void(0)">退出</a></li>
					<li onclick="showStatusWorkbench()"><a href="../login">返回登录页面</a></li>
					<li><a href="../">返回系统首页</a></li>
				</ul>
			</div>
		</div>
	</nav>


	<div class="container-fluid">
		<section class="container">
			<div class="heading">
				<h3></h3>
			</div>
	        <div id="main" class="row">
				<div class="col-md-12">
					<blockquote class="blockquote-1">
						<p>请仔细阅读文本，然后根据页面下方的提示进行类标选择</p>
						<small>如果出现页面显示问题请更换当前使用的浏览器；推荐：Safari,Chrome,Firefox</small>
					</blockquote>

					<div id="res">
						<h4>
							ID <input id="val" name="id"></input> 
							<input id="get" type="button" value="获取"></input>
						</h4>
						<h4>
							ID：<small id='SEQ'>${wechat.id}</small>
						</h4>
						<h4>
							标题：<small id='title'>${wechat.title}</small>
						</h4>
						<h4>
							微信名字：<small id='name'>${wechat.name}</small>
						</h4>
						<h4>
							微信号：<small id='account'>${wechat.account}</small>
						</h4>
						<h4>
							微信简介：<small id='brief'>${wechat.brief}</small>
						</h4>
						<h4>
							内容：<small id='content'>${wechat.content}</small>
						</h4>
						<h4>
							日期：<small id='date'>${wechat.date}</small>
						</h4>
					</div>
	                <p><label>以下为15个给定的主类标</label><label id="exist"></label></p>
			<c:forEach items="${classes}" var="item" varStatus="status">  
				<button id="choice" class="btn btn-default btn-sm" value="${item.id }" type="button">${item.classname}</button>
				<div style="display:none"><input  type="checkbox" name="labelid" value="${item.id }" ><label>${item.classname}</label></div>
			</c:forEach>
		    </div>
	    </div>
	<div id="subff" class="row">
		<blockquote class="blockquote-1">
			当点击上面的主类标之后，下面将出现子类标，如果没出现，则表示无子类标<br>
			当提交成功之后，将会页面自动显示下一个文本，不需要再通过ID获取。
		</blockquote>
		<div id="subclass" class="col-md-12"></div>
	</div>		
	</section>

		<div style="margin-top: 10px; margin-bottom: 20px" align="center">
		    <p>已为您推荐关键词有：
		    <c:forEach items="${keyWords}" var="item" varStatus="status">
		    ${item}；
			</c:forEach>
		    </p>
			<label>请输入2-5个本篇文章的关键词：</label> <br> 
			<input id="keyword1"size=10> 
			<input id="keyword2" size=10> 
			<input id="keyword3" style="display: none;" size=10> 
			<input id="keyword4" style="display: none;" size=10> 
			<input id="keyword5" style="display: none;" size=10>
			<button onclick="addKey()" class="btn btn-primary btn-sm">+</button>
		</div>
		<div style="margin-top: 10px; margin-bottom: 10px" align="center">
			<label>请选择确信度(以百分数表示)：</label><br> <select id="confidence">
				<option value="">未选择</option>
				<option value="0.5">50%</option>
				<option value="0.6">60%</option>
				<option value="0.7">70%</option>
				<option value="0.8">80%</option>
				<option value="0.9">90%</option>
			</select>
		</div>
		<div style="margin-top: 10px; margin-bottom: 10px" align="center">
			<label style="display: none;">请输入2-5个本篇文章的关键词：(为你推荐)</label>
		</div>

		<p class="text-center">
			<input class="btn btn-primary" id="sub" type="button" value="提交"></input>
		<p id="tip" style="display: none; color: green" class="text-center">操作成功</p>
	</div>

</body>

<script src="${staticPath}/assets/js/modernizr-latest.js"></script>
<script src="${staticPath}/js/jQuery-1.9.1.js"></script>
<script src="${staticPath}/js/bootstrap.min.js"></script>

<script type="text/javascript">
	var labelid = 0;
	var labels = new Array();
	//子标签问题
	var allChildLabels = [];
	function myreset() {
		labelid = 0;
		$("#subclass").children().each(function() {
			$(this).hide(600, function() {
				$(this).remove();
			});
		});
		$("div#main button").each(function() {
			$(this).removeClass("active");
			$(this).next().children(":first").prop("checked", false);
		});

	}
	function updateSublabels(btn, flag) {
		$("#subclass").children().remove();
		var str = "<button type=\"button\" data-classid = 5  class=\"btn btn-default btn-sm\"></button>";
		if (flag) {
			var pid = parseInt(btn.val());
			for (sub in allChildLabels) {
				if (allChildLabels[sub].parentId == pid) {
					newbtn = $(str);
					newbtn.attr("data-classid", allChildLabels[sub]);
					newbtn.html(allChildLabels[sub].classname);
					newbtn.val(allChildLabels[sub].id);
					newbtn.click(function() {
						var has = $(this).hasClass("active");
						if (has) {
							$(this).removeClass("active");
						} else {
							$(this).addClass("active");
						}
					});
					$("#subclass").append(newbtn);
				}
			}
		} else {
		}
	}
	function clickbtn(obj) {
		var btn = obj.data;
		var chbox = btn.next().children(":first");
		var result = btn.hasClass("active");
		$("div#main button").each(function() {
			$(this).removeClass("active");
			$(this).next().children(":first").prop("checked", false);
		});
		if (!result) {
			btn.addClass("active");
			chbox.prop("checked", true);
			updateSublabels(btn, true);
		} else {
			updateSublabels(btn, false);
		}
	}
	$(document).ready(function() {
						//加载所有的子类去。 
						$.ajax({
							'url' : "getAllChildren.do",
							success : function(data) {
								var l = JSON.parse(data);
								allChildLabels = [];
								for (child in l) {
									allChildLabels.push(l[child]);
								}
							}
						});
						$("div#main button").each(function() {
							$(this).bind("click", $(this), clickbtn)
						});
						$("div#main input[type=checkbox]").each(function() {
							$(this).prop("checked", false);
						});

						var url = '${staticPath}/wechatlab/get.do?id=';
						var btns = "<button type=\"button\" class=\"btn btn-default btn-sm\"></button>"
						$("#get")
								.click(
										function(a) {
											val = $("#val").val();
											parsedUrl = url + val;
											if (!isNaN(val)) {
												$
														.ajax({
															'url' : parsedUrl,
															success : function(data) {
																myreset();
																list = eval("("+ data+ ")");
																classes = list[0].wechatclassmaps;
																$("#SEQ").html(list[0].id);
																$("#title").html(list[0].title);
																$("#name").html(list[0].name);
																$("#account").html(list[0].account);
																$("#brief").html(list[0].brief);
																$("#content").html(list[0].content);
																$("#date").html(list[0].date);
																labels = list[0].wechatclassmaps;
																$("#exist").children().remove();
																labels.forEach(function(x) {
																			newbtn = $(btns);
																			newbtn.html(x.label.classname+ "("+ x.times+ ")");
																			$("#exist").append(newbtn);
																		});
															}
														});
											}
										});
						//	var Curl ='${staticPath}/wechatlab/update.do?';
						var interval = true;
						var timeout = null;
						$("#sub")
								.click(
										function(b) {
											if (interval) {
												interval = false;
												timeout = setInterval(
														function() {
															interval = true;
															clearTimeout(timeout);
														}, 5000);

												if ($("#SEQ").html().length == 0) {
													alert("参数错误!");
													return;
												}
												params = [];
												updateUrl = '';
												finalurl = '';
												$("input[type=checkbox]")
														.each(
																function(cb) {
																	if ($(this)
																			.prop(
																					"checked")) {
																		params
																				.push($(
																						this)
																						.val());
																	}
																});
												var beforeCount = params.length;
												//添加进去子类的分类,没有就没有
												var hasSub = false;
												$("#subclass")
														.children()
														.each(
																function() {
																	hasSub = true;
																	if ($(this)
																			.hasClass(
																					"active")) {
																		params
																				.push($(
																						this)
																						.val());
																	}
																});
												if (params.length == 0) {
													alert("请选择分类");
													return;
												}
												if (hasSub) {
													if (params.length == parseInt(beforeCount)) {
														alert("请选择子类");
														return;
													}
												}

												params.forEach(function(val) {
													labels[labelid] = val;
													labelid++;

													/* if(updateUrl.length==0){
														updateUrl+=('labelid='+val)
													}else{
														updateUrl+=('&labelid='+val)
													}
													finalurl = Curl+updateUrl+"&id="+$("#SEQ").html(); */
												});
												post();
												params = [];
												/* $.ajax({
													'url':finalurl,
													 success: function(data){
														 res = eval('('+data+')');
													     $("#tip").show();
												           setTimeout(function(){
												        	   $("#tip").fadeOut();
												           },2000);
												     }
												}); */
												/* myreset();
												$("#next").click(); */
											} else {//interval
												alert("您的请求过于频繁");
											}
										});
					});

	function post() {
		var id = $("#SEQ").html();
		var keywords = keyword();
		if (keywords.length != 0) {
			document.getElementById("errorKeyword").innerHTML = "";

			var confidence = eval(document.getElementById("confidence")).value;
			if (confidence > 100 || confidence < 0 || confidence.length == 0
					|| confidence == "") {
				alert("请选择您对分类标注的把握程度");
			} else {

				url = "./settextlabel.do";
				var la = new Array();
				var index = -1;
				for (i = 0; i < labels.length; i++) {
					if (!isNaN(labels[i])) {
						index = index + 1;
						la[index] = labels[i];
					}
				}
				console.log(id + "  " + la + " " + la);
				$
						.ajax({
							url : url,
							type : "POST",
							dataType : 'json',
							traditional : true,
							data : {
								id : id,
								labels : la,
								keywords : keywords,
								confidence : confidence
							},
							success : function(data) {
								//var obj = eval("("+ data+")");//转换后的JSON对象
								var obj = data;
								if (obj.code == 200) {
									window.location = "gettext.do";
								} else if (obj.message == "ParamsNULL") {
									alert("标注失败，所需参数有空");
								} else if (obj.message == "WechatIdIllegal") {
									alert("标注失败，微信文本id不合法");
								} else if (obj.message == "KeyWordsIllegal") {
									alert("标注失败，关键词在不在文本中");
								} else if (obj.message == "labelId OR Confidence Illegal") {
									alert("标注失败，类标id不存在或者确信度不合法");
								}
							}
						});
			}
		}
	}

	function keyword() {
		//keyWordOrigin
		var keyword;
		var keyword1 = eval(document.getElementById("keyword1")).value;
		var keyword2 = eval(document.getElementById("keyword2")).value;
		var keyword3 = eval(document.getElementById("keyword3")).value;
		var keyword4 = eval(document.getElementById("keyword4")).value;
		var keyword5 = eval(document.getElementById("keyword5")).value;
		var keyword = "";
		if (keyword1.length == 0 || keyword2.length == 0) {
			alert("至少写两个关键词");
		} else {
			keyword = keyword1 + " " + keyword2;
			if (keyword3.length != 0) {
				keyword = keyword + " " + keyword3;
			}
			if (keyword4.length != 0) {
				keyword = keyword + " " + keyword4;
			}
			if (keyword5.length != 0) {
				keyword = keyword + " " + keyword5;
			}
		}
		return keyword;
	}

	function addKey() {
		if (document.getElementById("keyword3").style.display == "none") {
			document.getElementById("keyword3").style.display = "inline";
		} else if (document.getElementById("keyword4").style.display == "none") {
			document.getElementById("keyword4").style.display = "inline";
		} else if (document.getElementById("keyword5").style.display == "none") {
			document.getElementById("keyword5").style.display = "inline";
		}
	}

	function logout() {
		$.ajax({
			url : "logout.do",
			type : "get",
			datatype : "json",
			success : function(data) {
			}
		});
	}
</script>
</html>